<template>
	<view class="content">
		<!--顶部导航-->
		<view class="content_1" :style="{'height':titleBarHeight + 'px'}">
			<view class="title_1" :style="{'margin-top':top + 'px'}">
				<view class="title_1_icon" @click="back">
					<image class="title_1_icon" src="../../../static/mine/finish/back.png" mode="aspectFit"></image>
				</view>
				<view class="title_1_text">整单满减</view>
			</view>
		</view>
		<!--占位-->
		<view :style="{height:spaceHeight +'px'}"></view>
		<!--搜索样式-->
		<view class="content_2">
			<!-- <view class="search_view">
				<image class="search_icon" src="../../../static/order/search/search.png" mode="aspectFit"></image>
				<input class="search_text" placeholder="搜索优惠券" placeholder-style="font-size:24upx;color:#8d8d8d"></se-input>
			</view> -->
		</view>
		<!--优惠券状态-->
		<view class="content_3">
			<view :class="[state == '1' ? 'state_box_active' : 'state_box']" @click="changeState(1)">所有券</view>
			<view :class="[state == '2' ? 'state_box_active' : 'state_box']" @click="changeState(2)">待使用(6)</view>
			<view :class="[state == '3' ? 'state_box_active' : 'state_box']" @click="changeState(3)">已过期</view>
			<view :class="[state == '4' ? 'state_box_active' : 'state_box']" @click="changeState(4)">已使用</view>
			<!--自制滚动条-->
			<view class="line">
				<view class="line_active" :style="{'margin-left':leftView + '%'}"></view>
			</view>
		</view>
		<!--优惠券详细-->
		<view class="content_4">
			<block v-for="(couponItem, index_coupon) in couponList" :key='index_coupon'>
				<!--根据state来显示所有券-->
				<view class="coupon_box" v-if="(state == '1')">
					<view class="coupon_left">
						<view class="coupon_img"></view>
						<view class="coupon_info">
							<view class="coupon_name">{{couponItem.couponname}}</view>
							<view class="coupon_date">{{couponItem.coupondate}}</view>
						</view>
					</view>
					<!-- 判断couponItem.state,显示不同的样式 -->
					<view :class="[couponItem.state == '立即使用' ? 'coupon_right_0' : '',
								   couponItem.state == '已使用' ? 'coupon_right_1' : '',
								   couponItem.state == '已过期' ? 'coupon_right_2' : '',]">
						<view class="vip_price" v-if="(couponItem.state == '立即使用' || couponItem.state == '已使用')">折扣价:{{couponItem.vipprice}}元</view>
						<view class="normal_price" v-if="(couponItem.state == '立即使用' || couponItem.state == '已使用')">￥{{couponItem.normalprice}}</view>
						<view v-if="(couponItem.state == '立即使用' || couponItem.state == '已使用')" :class="[couponItem.state == '立即使用' ? 'coupon_btn_0' : '',
																											  couponItem.state == '已使用' ? 'coupon_btn_1' : '']">{{couponItem.state}}</view>
						<view class="state_circle" v-if="(couponItem.state == '已过期')">
							<view class="circle_bg"></view>
							<view style="font-size: 24upx; color: #C5C5C5; position: absolute; background-color: #FFFFFF;left: 13upx;">已过期</view>
						</view>
					</view>
					<!--两个原点遮罩层-->
					<view class="point" style="left: 500upx;top: -10upx;"></view>
					<view class="point" style="left: 500upx;bottom: -10upx;"></view>
				</view>
				<!--所有券end-->

				<!--根据state来显示待使用的券-->
				<view class="coupon_box" v-if="(state == '2' && couponItem.state == '立即使用')">
					<view class="coupon_left">
						<view class="coupon_img"></view>
						<view class="coupon_info">
							<view class="coupon_name">{{couponItem.couponname}}</view>
							<view class="coupon_date">{{couponItem.coupondate}}</view>
						</view>
					</view>
					<!-- 判断couponItem.state,显示不同的样式 -->
					<view :class="[couponItem.state == '立即使用' ? 'coupon_right_0' : '',
								   couponItem.state == '已使用' ? 'coupon_right_1' : '',
								   couponItem.state == '已过期' ? 'coupon_right_2' : '',]">
						<view class="vip_price" v-if="(couponItem.state == '立即使用' || couponItem.state == '已使用')">会员价:{{couponItem.vipprice}}元</view>
						<view class="normal_price" v-if="(couponItem.state == '立即使用' || couponItem.state == '已使用')">￥{{couponItem.normalprice}}</view>
						<view v-if="(couponItem.state == '立即使用' || couponItem.state == '已使用')" :class="[couponItem.state == '立即使用' ? 'coupon_btn_0' : '',
																											  couponItem.state == '已使用' ? 'coupon_btn_1' : '']">{{couponItem.state}}</view>
						<view class="state_circle" v-if="(couponItem.state == '已过期')">
							<view class="circle_bg"></view>
							<view style="font-size: 24upx; color: #C5C5C5; position: absolute; background-color: #FFFFFF;left: 13upx;">已过期</view>
						</view>
					</view>
					<!--两个原点遮罩层-->
					<view class="point" style="left: 500upx;top: -10upx;"></view>
					<view class="point" style="left: 500upx;bottom: -10upx;"></view>
				</view>
				<!--待使用end-->

				<!--根据state来显示已过期的券-->
				<view class="coupon_box" v-if="(state == '3' && couponItem.state == '已过期')">
					<view class="coupon_left">
						<view class="coupon_img"></view>
						<view class="coupon_info">
							<view class="coupon_name">{{couponItem.couponname}}</view>
							<view class="coupon_date">{{couponItem.coupondate}}</view>
						</view>
					</view>
					<!-- 判断couponItem.state,显示不同的样式 -->
					<view :class="[couponItem.state == '立即使用' ? 'coupon_right_0' : '',
								   couponItem.state == '已使用' ? 'coupon_right_1' : '',
								   couponItem.state == '已过期' ? 'coupon_right_2' : '',]">
						<view class="vip_price" v-if="(couponItem.state == '立即使用' || couponItem.state == '已使用')">会员价:{{couponItem.vipprice}}元</view>
						<view class="normal_price" v-if="(couponItem.state == '立即使用' || couponItem.state == '已使用')">￥{{couponItem.normalprice}}</view>
						<view v-if="(couponItem.state == '立即使用' || couponItem.state == '已使用')" :class="[couponItem.state == '立即使用' ? 'coupon_btn_0' : '',
																											  couponItem.state == '已使用' ? 'coupon_btn_1' : '']">{{couponItem.state}}</view>
						<view class="state_circle" v-if="(couponItem.state == '已过期')">
							<view class="circle_bg"></view>
							<view style="font-size: 24upx; color: #C5C5C5; position: absolute; background-color: #FFFFFF;left: 13upx;">已过期</view>
						</view>
					</view>
					<!--两个原点遮罩层-->
					<view class="point" style="left: 500upx;top: -10upx;"></view>
					<view class="point" style="left: 500upx;bottom: -10upx;"></view>
				</view>
				<!--已过期end-->

				<!--根据state来显示已使用的券-->
				<view class="coupon_box" v-if="(state == '4' && couponItem.state == '已使用')">
					<view class="coupon_left">
						<view class="coupon_img"></view>
						<view class="coupon_info">
							<view class="coupon_name">{{couponItem.couponname}}</view>
							<view class="coupon_date">{{couponItem.coupondate}}</view>
						</view>
					</view>
					<!-- 判断couponItem.state,显示不同的样式 -->
					<view :class="[couponItem.state == '立即使用' ? 'coupon_right_0' : '',
								   couponItem.state == '已使用' ? 'coupon_right_1' : '',
								   couponItem.state == '已过期' ? 'coupon_right_2' : '',]">
						<view class="vip_price" v-if="(couponItem.state == '立即使用' || couponItem.state == '已使用')">会员价:{{couponItem.vipprice}}元</view>
						<view class="normal_price" v-if="(couponItem.state == '立即使用' || couponItem.state == '已使用')">￥{{couponItem.normalprice}}</view>
						<view v-if="(couponItem.state == '立即使用' || couponItem.state == '已使用')" :class="[couponItem.state == '立即使用' ? 'coupon_btn_0' : '',
																											  couponItem.state == '已使用' ? 'coupon_btn_1' : '']">{{couponItem.state}}</view>
						<view class="state_circle" v-if="(couponItem.state == '已过期')">
							<view class="circle_bg"></view>
							<view style="font-size: 24upx; color: #C5C5C5; position: absolute; background-color: #FFFFFF;left: 13upx;">已过期</view>
						</view>
					</view>
					<!--两个原点遮罩层-->
					<view class="point" style="left: 500upx;top: -10upx;"></view>
					<view class="point" style="left: 500upx;bottom: -10upx;"></view>
				</view>
				<!--已使用end-->
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleBarHeight: '',
				spaceHeight: '',
				top: '',
				shoptypeHeight: '',
				state: '1', //订单状态
				leftView: '6', //自定义滚动条位置
				couponList: [{
						couponimg: '',
						couponname: '满十减一',
						coupondate: '2020.11.15-2020.11.22',
						vipprice: '22',
						normalprice: '35.00',
						state: '立即使用'
					},
					{
						couponimg: '',
						couponname: '整单九五折',
						coupondate: '2020.11.15-2020.11.22',
						vipprice: '22',
						normalprice: '35.00',
						state: '立即使用'
					},
					{
						couponimg: '',
						couponname: '满20减5元',
						coupondate: '2020.11.15-2020.11.22',
						vipprice: '22',
						normalprice: '35.00',
						state: '已使用'
					},
					{
						couponimg: '',
						couponname: '满30减10元',
						coupondate: '2020.11.15-2020.11.22',
						vipprice: '22',
						normalprice: '35.00',
						state: '已过期'
					}
				]
			}
		},
		onLoad() {
			//获取系统信息
			uni.getSystemInfo({
				success: (res) => {
					this.top = res.statusBarHeight - uni.upx2px(30)
					this.titleBarHeight = res.statusBarHeight + 22
					this.spaceHeight = res.statusBarHeight + 38
					this.shoptypeHeight = res.windowHeight - uni.upx2px(590)
				},
			})
		},
		methods: {
			//传id值，点击切换状态
			changeState: function(id) {
				this.state = id
				//判断id，确定自定义滚动条的位置
				if (id == 1) {
					this.leftView = 6
				}
				if (id == 2) {
					this.leftView = 34
				}
				if (id == 3) {
					this.leftView = 63
				}
				if (id == 4) {
					this.leftView = 88
				}
			},
			//返回
			back: function() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F0F0F0;
	}

	/*
		顶部导航样式
	*/
	.content_1 {
		width: 750upx;
		background-image: linear-gradient(#E03507, #D92200); //颜色渐变效果(上下)
		text-align: center;
		padding-top: 48upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		z-index: 999;
	}

	.title_1 {
		height: 45upx;
		color: #FFFFFF;
		font-size: 32upx;
		position: absolute;
		left: 25upx;
		top: 50upx;
		display: flex;
		align-items: center;
	}

	.title_1_icon {
		width: 20upx;
		height: 35upx;
		margin-right: 25upx;
	}

	.title_1_text {
		height: 45upx;
		font-size: 32upx;
		line-height: 45upx;
		color: #FFFFFF;
	}

	/*
		搜索框样式
	*/
	.content_2 {
		height: 20upx;
		background-image: linear-gradient(#D92200, #C61500); //颜色渐变效果(上下)
		padding-top: 10upx;
	}

	.search_view {
		height: 66upx;
		margin: 0 25upx;
		margin-top: 10upx;
		background-color: #FFFFFF;
		border-radius: 65upx;
		padding-left: 30upx;
		display: flex;
		align-items: center;
	}

	.search_icon {
		height: 30upx;
		width: 30upx;
		margin-right: 20upx;
		margin-top: -5upx;
	}

	.search_text {
		height: 34upx;
		width: 500upx;
	}

	/*
		订单状态样式
	*/
	.content_3 {
		height: 80upx;
		background-color: #FFFFFF;
		display: flex;
		position: relative;
	}

	.state_box {
		height: 80upx;
		font-size: 28upx;
		color: #595959;
		line-height: 80upx;
		text-align: center;
		font-weight: 550;
		padding: 0 25upx;
		margin-right: 10upx;
	}

	.state_box_active {
		height: 80upx;
		font-size: 32upx;
		color: #2D2D2D;
		line-height: 80upx;
		text-align: center;
		font-weight: 550;
		padding: 0 25upx;
		margin-right: 10upx;
	}

	.line {
		position: absolute;
		bottom: 0upx;
		left: 0upx;
		width: 555upx;
		height: 8upx;
		border-radius: 8upx;
		background-color: #ffffff;
	}

	.line_active {
		width: 72upx;
		height: 8upx;
		border-radius: 8upx;
		background-color: #DC2700;
	}

	/*
		优惠券详细样式
	*/
	.content_4 {
		margin: 0 25upx;
		margin-top: 20upx;
		padding-bottom: 200upx;
	}

	.coupon_box {
		height: 160upx;
		display: flex;
		align-items: center;
		position: relative;
		margin-bottom: 20upx;
	}

	.coupon_left {
		width: 479upx;
		height: 160upx;
		background-color: #FFFFFF;
		border-top-left-radius: 30upx;
		border-bottom-left-radius: 30upx;
		padding-left: 22upx;
		padding-right: 12upx;
		box-shadow: -10upx 0upx 16upx rgba(0, 0, 0, 0.08);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.coupon_right_0 {
		width: 141upx;
		height: 120upx;
		background-color: #FEF3F1;
		padding: 20upx 26upx;
		border-top-right-radius: 30upx;
		border-bottom-right-radius: 30upx;
		box-shadow: 10upx 0upx 16upx rgba(0, 0, 0, 0.08);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.coupon_right_1 {
		width: 141upx;
		height: 120upx;
		background-color: #FFFFFF;
		padding: 20upx 26upx;
		border-top-right-radius: 30upx;
		border-bottom-right-radius: 30upx;
		box-shadow: 10upx 0upx 16upx rgba(0, 0, 0, 0.08);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.coupon_right_2 {
		width: 141upx;
		height: 120upx;
		background-color: #FFFFFF;
		padding: 20upx 26upx;
		border-left: 4upx dashed #EBEBEB;
		border-top-right-radius: 30upx;
		border-bottom-right-radius: 30upx;
		box-shadow: 10upx 0upx 16upx rgba(0, 0, 0, 0.08);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.point {
		width: 20upx;
		height: 20upx;
		background-color: #F0F0F0;
		position: absolute;
		border-radius: 20upx;
	}

	.coupon_img {
		width: 142upx;
		height: 116upx;
		background-color: #C0C0C0;
	}

	.coupon_info {
		width: 316upx;
		height: 116upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.coupon_name {
		height: 72upx;
		width: 316upx;
		line-height: 36upx;
		font-size: 24upx;
		font-weight: bold;
		color: #2D2D2D;
		display: -webkit-box; //两行溢出隐藏
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.coupon_date {
		height: 28upx;
		width: 224upx;
		line-height: 28upx;
		color: #595959;
		font-size: 20upx;
	}

	.vip_price {
		width: 132upx;
		height: 34upx;
		font-size: 24upx;
		color: #F55938;
		line-height: 34upx;
	}

	.normal_price {
		width: 80upx;
		height: 32upx;
		font-size: 22upx;
		color: #595959;
		line-height: 32upx;
		text-decoration: line-through;
	}

	.coupon_btn_0 {
		width: 140upx;
		height: 44upx;
		border-radius: 44upx;
		font-size: 24upx;
		color: #FFFFFF;
		line-height: 44upx;
		text-align: center;
		background-image: linear-gradient(to right, #FF7419, #FA2D18); //颜色渐变效果(从左到右)
	}

	.coupon_btn_1 {
		width: 140upx;
		height: 44upx;
		border-radius: 44upx;
		font-size: 24upx;
		color: #FF3939;
		line-height: 44upx;
		text-align: center;
		border: 2upx solid #FF3939;
	}

	.state_circle {
		width: 100upx;
		height: 100upx;
		border-radius: 120upx;
		border: 4upx solid #D6D6D6;
		display: flex;
		align-items: center;
		position: relative;
	}

	.circle_bg {
		width: 65upx;
		height: 65upx;
		border-radius: 75upx;
		border: 2upx solid #D6D6D6;
		margin: 0 auto;
	}
</style>
